<template>
  <div style="display: flex">
    <div style="width: 310px; height: 90px; background-color: #1890ff">
      <p style="color: #ffff; margin: 15px 0 0 130px; font-size: 22px">{{ objday.one }}</p>
      <p style="color: #ffff; margin: 10px 0 0 100px">当前在线用户</p>
    </div>

    <div style="width: 310px; height: 90px; background-color: #52c41a; margin-left: 20px">
      <p style="color: #ffff; margin: 15px 0 0 125px; font-size: 22px">{{ objday.two }}</p>
      <p style="color: #ffff; margin: 10px 0 0 100px">当日访问量</p>
    </div>

    <div style="width: 310px; height: 90px; background-color: #fa8c16; margin-left: 20px">
      <p style="color: #ffff; margin: 15px 0 0 120px; font-size: 22px">{{ objday.three }}</p>
      <p style="color: #ffff; margin: 10px 0 0 100px">当月新增用户</p>
    </div>

    <div style="width: 310px; height: 90px; background-color: #eb2f96; margin-left: 20px">
      <p style="color: #ffff; margin: 15px 0 0 130px; font-size: 22px">{{ objday.five }}</p>
      <p style="color: #ffff; margin: 10px 0 0 100px">当月活动用户</p>
    </div>
  </div>
  <div>
    <a-card style="margin-top: 30px">
      <div id="main" style="width: 85vw; height: 400px"></div>
    </a-card>
  </div>
  <div>
    <a-card style="margin-top: 20px; padding-right: 50px">
      <div id="main1" style="width: 90vw; height: 400px; margin-right: 70px"></div>
    </a-card>
  </div>
  <div>
    <a-card title="" style="margin-top: 20px;" >
      <div style="display: flex">
        <div id="main2" style="width: 50vw; height: 400px"></div>
        <a-card style="height: 400px; width: 40vw">
          <a-table :dataSource="dataSource2" :columns="columns" bordered :pagination="{ pageSize: 5 }" rowKey="key"/>
        </a-card>
      </div>
    </a-card>
  </div>
  <div style="display: flex">
    <a-card title="30日TO10应用访问统计" style="width: 42vw; margin-top: 20px">
      <a-table :dataSource="dataSource" :columns="columns1" bordered  :pagination="{ pageSize: 5 }"/>
    </a-card>
    <a-card title="30日TOP10浏览器访问统计" style="width: 43vw; margin-top: 20px">
      <a-table :dataSource="dataSource1" :columns="columns2" bordered  :pagination="{pageSize: 5 }" />
    </a-card>
  </div>
</template>
<script setup>
  import { dashboardApi } from '/src/api/system/dashboard.js';
  import * as echarts from 'echarts';
  import { ref, reactive, onMounted } from 'vue';
  import chinaGeoJSON from './china.geo.json'; // 假设你已经下载了GeoJSON文件

  const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
  const current = ref(1);
  const pageSizeRef = ref(10);
  const total = ref(50);
  const onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    pageSizeRef.value = pageSize;
  };
  echarts.registerMap('china', chinaGeoJSON);
  const objday = reactive({
    one: 1,
    two: 2,
    three: 3,
    five: 4,
  });
  const dataSource = ref([]);
  const dataSource1 = ref([]);
  // const
  // 表图数据
  // let list1;
  let list2;
  let list3;
  async function dashboards() {
    let dashboardres = await dashboardApi.getDashboard();
    console.log(dashboardres);
    objday.one = dashboardres.data.activeUsers;
    objday.two = dashboardres.data.dayCount;
    objday.three = dashboardres.data.newUsers;
    objday.five = dashboardres.data.onlineUsers;
    
    list2 = dashboardres.data.reportDayHour.map((i) => i.reportcount);
    list3 = dashboardres.data.reportMonth.map((i) => i.reportcount);
    dataSource.value = dashboardres.data.reportApp;
    dataSource1.value = dashboardres.data.reportBrowser;
    console.log(dataSource.value);
    echart();
    echart1();
  }

  function echart() {
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '当日访问情况统计',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      yAxis: {
        type: 'value',
        // min: 0, // Y轴最小值
        // max: 20, // Y轴最大值
        // boundaryGap: [0, 0.01]
      },
      xAxis: {
        type: 'category',
        data: ['0', '1', '2', '4', '5', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      },
      series: [
        {
          name: '',
          type: 'bar',
          data: list2,
          itemStyle: {
            color: '#44a5ff',
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  // -----------------------------------------------------------------------------------------
  // var currentDate = new Date();
  var startDate = new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000); // 获取当日的日期
  // 生成30天的日期和示例数据
  function isWeekday(date) {
    return date.getDay() != 0 && date.getDay() != 6; // 0=周日, 6=周六
  }
  function echart1() {
    var data = [];
    var categories = []; //循环完后排除完周六·周日的数组
    for (var i = 0; i < 30; i++) {
      var date = new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000); // 计算一个月的每一天的日期
      if (isWeekday(date)) {
        // 检查是否为工作日
        categories.push(date.toLocaleDateString()); // 如果是工作日，追加到X轴数据中
        data.push(Math.round(Math.random() * 100)); // 生成随机数值数据并添加到Y轴数据中
      }
    }
    console.log(categories);
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '30日访问情况统计',
      },
      tooltip: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: categories,
          axisTick: {
            alignWithLabel: true,
          },
          //     axisLabel: {
          //     formatter: function (value) {
          //     // 格式化日期显示，这里可以根据需要调整日期格式
          //     return value.split('/').reverse().join('-');//假设toLocaleDateString返回的是"MM/DD/YYYY"格式，这里转换为"YYYY-MM-DD"
          //   }
          // }
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '',
          type: 'bar',
          data: list3,
          barWidth: '45%',
          barGap: '10%',
          barCategoryGap: '10%',
          itemStyle: {
            color: '#44a5ff',
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  // 调用函数生成图表
  // generateWorkdayData();
  // 中国地图
  function echart2() {
    var myChart = echarts.init(document.getElementById('main2'));
    // 配置选项
    const option = {
      title: {
        // text: '中国地图省份访问统计',
        left: 'center',
      },
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        min: 0,
        max: 10000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
      },
      geo: {
        type: 'map',
        map: 'china',
        roam: 'scale',
        zoom: 1.2,
        scaleLimit: {
          min: 1.1,
          max: 2,
        },
      },
      series: [
        {
          name: '省份访问量',
          map: 'china', // 使用echarts注册的中国地图
          roam: 'scale',
          label: {
            show: true,
          },
          data: [
            { name: '北京', value: Math.round(Math.random() * 10000) },
            { name: '天津', value: Math.round(Math.random() * 10000) },
            // ... 其他省份数据
          ],
        },
      ],
    };

    // 绘制地图
    myChart.setOption(option);
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'name',
      key: 'name',
      render: (text, record, index) => `${index + 1}`, // 自定义渲染序号
    },

    {
      title: '省份',
      dataIndex: 'age',
      key: 'age',
    },

    {
      title: '浏览量(PV)',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const dataSource2 = ref([]);
  const columns1 = [
    {
      title: '应用名称',
      dataIndex: 'appname',
      key: 'appname',
    },
    {
      title: '访问量',
      dataIndex: 'reportcount',
      key: 'reportcount',
    },
  ];
  const columns2 = [
    {
      title: '浏览量',
      dataIndex: 'reportstring',
      key: 'reportstring',
    },
    {
      title: '访问量',
      dataIndex: 'reportcount',
      key: 'reportcount',
    },
  ];
  onMounted(() => {
    dashboards();
    // echart();
    echart1();
    echart2();
  });
</script>
